<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见的事件</title>

    <script>

  //2.加载完成事件：onload
  window.onload = function() {
    //1.失去焦点：用于表单验证
    document.getElementById("username").onblur = function() {
      //alert("失去焦点...");
    }

    //3.绑定鼠标事件
    //鼠标移到元素之上
    document.getElementById("username").onmouseover = function() {
      //alert("鼠标来了...");
    }
    //鼠标点击
    //定义方法时，定义一个形参，接收
    document.getElementById("username").onmousedown = function(event) {
      //alert("鼠标点击了...");
      //alert(event.button);
    }

    //4.键盘事件
    document.getElementById("username").onkeydown = function(event) {
      //alert(event.keyCode);
      //13是键盘的回车
      //if (event.keyCode == 13) {
      //  alert("提交表单");
      //}
    }

    //5.选择和改变事件：三级联动、城市选择等
    document.getElementById("username").onchange = function(event) {
      //alert("改变了...");
    }

    document.getElementById("city").onchange = function(event) {
      //alert("改变了...");
    }

    // 6.表单事件：onsubmit 阻止表单提交，返回值是 false，则表单不提交
    //方式一：
    document.getElementById("form").onsubmit = function() {
      //校验用户名是否正确
      var flag = false;

      return flag;
    }

    //方法二：
    function checkForm() {
      //校验用户名是否正确
      var flag = false;

      return flag;
    }

  }


    </script>

</head>
<body>

<!-- 方法二 -->
<!--<form action="#" onsubmit="return checkForm();">-->
<!-- 方法一 -->
<form id="form" action="#">

    <input type="text" id="username" name="username">

    <select id="city">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>西安</option>
    </select>

    <input type="submit" value="提交">

</form>

</body>
</html>